<template>
    <div id="main">
        <div style="font-size:13px; margin-left:10px;">
            <label for="">1.备份数据库的名称是按照当时备份的时间来进行命名的；</label><br><br>
            <label for="">2.对于不同时间的数据库应当按时进行删除操作，避免无用的数据库占用机器空间。</label>
        </div>
        <div style="width:600px;margin-top:30px;margin-left:150px;">
            <Form :model="formItem" :label-width="180" :rules="ruleValidate" ref="formItem">
                <FormItem label="备份数据库名称：" prop="create_database_name">
                    <Input v-model="formItem.create_database_name" placeholder="点击按钮，自动生成。" :readonly='true'></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="createDatabaeName" v-if="checkPermission('112421')">生成备份数据库名称</Button>
                    <Button type="primary" style="margin-left: 8px" @click="startBackUp('formItem')" v-if="checkPermission('112421')">开始备份</Button>
                </FormItem>
                <FormItem label="现有备份数据库信息：">
                    <Select v-model="formItem.selectDatabases" @on-change="handleChange">
                        <Option v-for="item in databaseList" :value="item" :key="item">{{item}}</Option> 
                    </Select>
                </FormItem>
                <FormItem label="备份数据库详细信息">
                </FormItem>
                <FormItem label="数据库名称：">
                    <Input v-model="formItem.database_name" :readonly='true' type="text" ></Input>
                </FormItem>   
                <FormItem label="备份创建时间：">
                    <Input v-model="formItem.database_time" :readonly='true' type="text" ></Input>
                </FormItem>
            </Form>
        </div>
        <Modal ref="modal" style="display:flex;align-items:center;justify-content:center;" width="200" :mask-closable="false" :scrollable="false">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>数据库备份</span>
            </p>
            <div style="text-align:center">
                <p>数据库备份中......</p>
            </div>
            <div slot="footer">
                <Button type="info" long size="large" >备份完成，自动关闭</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import moment from "moment";
    import parent from "../Parent";
    export default {
        extends:parent,
        data () {
            return {
                formItem: {
                    create_database_name: '',
                    selectDatabases: '',
                    database_name:'',
                    database_time:''
                },
                databaseList:[],
                ruleValidate:{
                    create_database_name:[
                         { required: true, message: '请先生成备份数据库名称！', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            createDatabaeName(){
                var nowTime=new Date();
                this.formItem.create_database_name='ofsp'+moment().format('YYYYMMDDHHmmss') +'.bak';
                this.formItem.selectDatabases=this.formItem.database_name=this.formItem.database_time = '';
            },
            startBackUp(name){
                this.$refs[name].validate((valid)=>{
                    if(valid){
                        this.$Modal.confirm({
                            title: '确定开始备份吗？',
                            content: '<p>确定开始备份，请点击确定按钮</p><br><p>取消，请点击取消按钮</p>',
                            onOk:() =>{
                                //判断生成的名字的后缀名是否是bak
                                if(this.formItem.create_database_name.split('.')[1] == "bak"){
                                    //传递新生成的备份数据库名字到后台，判断这个备份是否存在
                                    this.$refs["modal"].visible = true;
                                    this.api.post('database/backup_database',{databaseName:this.formItem.create_database_name}, res=>{
                                    this.$CustomMessage.success('*数据库备份成功！');
                                    this.formItem.create_database_name='';
                                    this.$refs["modal"].visible = false;
                                    this.getAllDatabase();
                                    });
                                }else{
                                    this.$CustomMessage.error('*备份数据库文件的扩展名必须为“bak”');
                                }
                            }
                        })
                    }else{
                        this.$CustomMessage.error('请先生成备份数据库名字！');   
                    }
                })
            },
            getAllDatabase() {
                this.api.post('database/get_databases', null, res => {
                    this.databaseList = res.list;
                });
            },
            handleChange(value){
                if(value) {
                    this.formItem.database_name=this.formItem.selectDatabases;
                    var date = moment(this.formItem.selectDatabases.substring(4,this.formItem.selectDatabases.lastIndexOf('.')), "YYYY-MM-DD HH:mm:ss");
                    this.formItem.database_time = date.lang("zh-cn").format("LLLL");
                }
            }
        },
        created() {
            this.getAllDatabase();
        }
    }
</script>